{% extends 'myhome/base.html'%}

{% block title %}
<title>订单详情页</title>
<link rel="stylesheet" type="text/css" href="/static/myhome/public/css/cart.css">
<link rel="stylesheet" type="text/css" href="/static/myhome/public/css/cart-app.css">
{% endblock %}


{% block con %}
<form class="form-inline" method="POST">
  {% csrf_token %}
 <div class="mainbody cart" style="padding-top: 70px;">
    <div class="container">
      <div class="row">
        <br>
        <div class="col-md-12">
          <div style="height: 160px;background: #fff;">
            <div class="col-md-8">
              <h4>填写收货信息</h4>
            </div>
            <div class="col-md-4">
              <h4>选择支付方式</h4>
            </div>
            <div class="col-md-8">

                <div class="form-group">
                  <label for="exampleInputName2">收货人</label>
                  <input type="text" name="username" value="{{order.username}}" readonly class="form-control"  placeholder="收货人">
                </div>
                <div class="form-group">
                  <label for="exampleInputEmail2">联系电话</label>
                  <input type="email" name="phone"  value="{{order.phone}}" readonly class="form-control"  placeholder="联系电话">
                </div>

                <div class="form-group" style="margin-top: 20px;">
                  <label for="exampleInputEmail2">收货地址</label>
                  <input type="text" name="address"  value="{{order.address}}"  readonly class="form-control" size="50"  placeholder="收货地址">
                </div>
                <!-- 隐藏域  传递当前的购物车id -->
                <input type="hidden" name="cartids" value="{{ request.GET.cartid }}">

            </div>
            <div class="col-md-2" style="height: 40px;border:1px solid red;margin: 10px;text-align: center;line-height: 40px;">
              支付宝
            </div>
            <div class="col-md-2" style="height: 40px;border:1px solid #ccc;margin: 10px;text-align: center;line-height: 40px;">
              货到付款
            </div>
          </div>
        </div>
      </div>
      <!-- 购物车详情头 -->
      <table class="cart-header">
        <tbody>
          <tr>
            <td class="cart-col-select col-md-3 col-xs-3 col-sm-3">
              <div class="cart-select-all JSelectAll">
                <h4>购物清单</h4>
              </div>
            </td>
            <td class="cart-col-name col-md-3 hidden-xs hidden-sm">商品</td>
            <td class="cart-col-price col-md-2 hidden-xs hidden-sm">单价(元)</td>
            <td class="cart-col-number col-md-2 hidden-xs hidden-sm">数量</td>
            <td class="cart-col-total col-md-1 hidden-xs hidden-sm">小计(元)</td>
          </tr>
        </tbody>
      </table><!-- 购物车详情头 E-->

      <!-- 购物清单信息列表 -->
      <div class="cart-merchant-list">
        <div class="cart-merchant">
          <table class="cart-merchant-body">
            <tbody>
            {% for v in order_info %}
              <tr class="cart-product">
                <td class="cart-col-select col-md-3 col-xs-4 col-sm-4">
                  <a href="meilanx.html" class="cart-product-link" target="_blank">
                    <img src="{{ v.goodsid.pic_url }}" class="cart-product-img" width="200px">
                  </a>
                </td>
                <td class="cart-col-name col-md-3 col-xs-8 col-sm-8">
                  <a href="meilanx.html" class="cart-product-link" target="_blank">
                    <p>{{ v.goodsid.goodsname }}</p>
                    <span class="cart-product-desc">{{ v.goodsid.title }}</span>
                  </a>

                </td>
                <td class="cart-col-price col-md-2 hidden-xs hidden-sm">
                  <p>
                    <span class="cart-product-price">{{ v.goodsid.price }}</span>
                  </p>
                </td>
                <td class="cart-col-number col-md-2 hidden-xs hidden-sm">
                  <div class="cart-product-number-adder">
                    <p class="cart-product-number-max show"></p>
                    <div class="mz-adder" style="text-align: center;line-height: 40px;">
                     <h5>{{ v.num }}</h5>
                    </div>
                  </div>
                </td>
                <td class="cart-col-total col-md-1 hidden-xs hidden-sm">

                  {% load pagetag %}
                  <span class="cart-product-price total">{%  cheng v.num v.goodsid.price %}</span>
                </td>

              </tr>
            {% endfor %}
            </tbody>
          </table>
        </div>
      </div><!-- 购物清单信息列表 E-->
    </div>
    <!-- 结算详情 -->
    <div class="cart-footer" id="cartFooter">
      <div class="container">
         <div class="cart-footer-left col-md-6 col-xs-4 col-sm-4">

           <!-- <span class="cart-remove-selected" id="removeSelected">删除选中的商品</span> -->
           <span class="cart-footer-count">
            共
            <span class="cart-footer-num" id="totalCount"></span>
            件商品
           </span>
        </div>
        <div class="cart-footer-right col-md-5 col-md-offset-1 col-sm-offset-2 col-xs-8 col-sm-6">
          <span class="cart-footer-sum">
            <span class="cart-footer-text">已优惠</span>
            <span class="cart-footer-num red" id="totalDiscount">0.00</span>
            <span class="cart-footer-text">元， 合计(不含运费)：</span>
            <span class="cart-footer-total" id="totalPrice">0.00</span>
          </span>
          <div class="mz-btn success" id="cartSubmit">返回上一页</div>
        </div>
      </div>
    </div><!-- 结算详情 E-->
  </div>
<!-- 主内容区域 E-->
</form>
<script>
    //计算总价
    var totalprice=0
    //循环所有的.total(小计价格)
    $('.total').each(function(){
    //读取小计价格 并且累加
    totalprice += Number($(this).text())
    })
    //把所有的小计价格 累加 并且写如总价
    $('#totalPrice').text(toDecimal2(totalprice))

    //计算总数
    var totalcount=0
    $('.mz-adder').each(function(){
        //读取所有h5标签的内容 因为h5 中写入了 当前行数量
        totalcount+=Number($(this).find('h5').text())
    })
    $('#totalCount').text(totalcount)

    //判断订单是否有内容
    $('#cartSubmit').click(function(){
        //判断内容
        //$('form').submit()
        //location.href='{% url 'member_order'%}'
        window.open('{% url 'member_order'%}','_self')
    })
</script>
{% endblock %}